<script setup>
import { onMounted, ref, unref } from "vue";

// import QifPlayer from "../../src/Player";

import { QifPlayer } from "../../lib/index.es";
import "../../lib/style.css";

const qif = ref()

function getEvent(eventType, eventContext) {
  switch (eventType) {
    case 200:
      // console.log(eventType, "qif");
      // qif.value.videoPlay(0, 1, "1771fe767e55493887a4e56441a16b77");
      break;
    case 100:
      console.log(eventContext, eventType);
      break;
    case 101:
      console.log(eventContext, eventType);
      break;
    case 102:
      console.log(eventContext, eventType);
      break;
    case 103:
      console.log(eventContext, eventType);
      break;
    case 220:
      console.log(eventContext, eventType);
      break;
    case 300:
      console.log(eventContext, eventType);
      break;

    default:
      break;
  }
}

onMounted(() => {
  qif.value = new QifPlayer("appx", 1, "172.26.4.29", "8810", "xx", 1, getEvent);
  qif.value.splitScreen(12, 4, 3);
});
</script>

<template>
  <div class="video-wrapper" id="appx" />
</template>

<style scoped>
.video-wrapper {
  width: 1200px;
  height: 800px;
}
</style>
